<template>
  <div v-if="data.seaAirWaybill">
    <el-row :gutter="24">
      <el-col :span="11">
        <p style="color:#0081ff;"  @dblclick="jumpToCustomerDetails(data.seaAirWaybill.customerId)">
          客户：{{ data.seaAirWaybill.customerName }}
        </p>
        <div v-if="customerSpecial!=null&&customerSpecial!=''">
          <el-tooltip effect="light" placement="left" >
            <div slot="content">
              <div
                v-html="customerSpecial"
                style="max-width:500px;overflow:auto;background: #e1e5e8;font-size: 15px;line-height: 16px;color: #888;max-height: 320px;"
              ></div>
            </div>
            <template v-if="temp==1">
              <img :src="specialPng">
            </template>
          </el-tooltip>
        </div>
        <span class="text-blue pointer" @click="toEdit">
          运单号：{{ data.seaAirWaybill.waybillNo }}
        </span>
        <el-tooltip effect="dark" content="点击复制" placement="bottom">
          <i
            class="el-icon-copy-document tag-read"
            :data-clipboard-text="data.seaAirWaybill.waybillNo"
            @click="copy"
          ></i>
        </el-tooltip>
        <p>参考号：{{ data.seaAirWaybill.referenceNo }}</p>
        <p>追踪号：{{ data.seaAirWaybill.trackNumber }}</p>
        <p>目的国家：{{ data.seaAirWaybill.countryName }}</p>
      </el-col>
      <el-col :span="11" :offset="2">
        <p>销售：{{ data.seaAirWaybill.salesmanName }}</p>
        <p>客服：{{ data.seaAirWaybill.servicesName }}</p>
        <p>件数：{{ data.seaAirWaybill.inStockTotalPackages }}</p>
        <p>计费重：{{ data.seaAirWaybill.customerChargedWeight }}</p>
        <span style="color:red;"  @dblclick="jumpToChannelDetails(data.seaAirWaybill.inStockChannel)">
          渠道：{{ data.seaAirWaybill.inStockChannelName }}
        </span>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import Clipboard from "clipboard";
import specialPng from "@/assets/images/special-1.png";
import {ajax} from "../../../../../store/yg/common/utils";
export default {
  props: ["row", "data", "more"],
  data() {
    return {
      temp:0,
      specialPng:specialPng,
      customerSpecial:"",
    };
  },
  mounted() {
    this.initSpecial();

  },
  methods: {
    initSpecial(){
      var params = {};
      params["customerId"]=this.data["seaAirWaybill"]["customerId"];
      params["shippingWay"]=this.data["seaAirWaybill"]["shippingWay"];
      params["countryId"]=this.data["seaAirWaybill"]["countryId"];
      ajax("findQuestionsSpecialAll", params).then(
        res => {
          if (res.code == 200) {
            this.temp=1;
            this.customerSpecial = res.data;
          }
        },
        error => {
          console.log(error);
        }
      );

    },
    toEdit() {
      var url = "#/blank/waybill__alledit__main";
      url = url + "?waybillId=" + this.data["waybillId"];
      window.open(url, "_blank");
    },
    jumpToChannelDetails(id){
      window.open("/#/main/setting__customerchannel__list?id="+id, "_blank");
    },
    jumpToCustomerDetails(id){
      window.open("/#/main/customer__info__list?id="+id, "_blank");
    },
    copy() {
      var clipboard = new Clipboard(".tag-read");
      clipboard.on("success", e => {
        this.$message.success("复制成功");
        // 释放内存
        clipboard.destroy();
      });
      clipboard.on("error", e => {
        // 不支持复制
        this.$message.error("该浏览器不支持自动复制");
        // 释放内存
        clipboard.destroy();
      });
    }
  }
};
</script>

<style scoped></style>
